<template>
	<view>
		<view class="w-1 fr-c" style="padding: 20rpx;" v-if="state==11">
			<image style="width: 25rpx; height: 25rpx;" class="circle" :src="$path + '/tab3/tip.png'" mode=""></image>
			<text class="m-l-10 fs-24" style="color: #FF5C55;">现在取消订单，将无法退还上门费用，请谨慎操作</text>
		</view>
		<view class="tbox fr-c fs-24" style="color: #E99055;">请告知您的取消原因，我们会努力为您提供更好的服务</view>
		<view class="fr-s-c" @click="cur = index" v-for="(item,index) in list" :key="index" style="padding: 22rpx 30rpx;">
			<text class="text-line-1 c-33 fs-28 bold flex-1">{{item.title}}</text>
			<image style="width: 38rpx; height: 38rpx;" v-if="cur!=index" :src="$path + '/login/ng.png'" mode=""></image>
			<image style="width: 38rpx; height: 38rpx;" v-else :src="$path + '/login/y.png'" mode=""></image>
		</view>
		<view class="fr-s-c" @click="cur=-1" style="padding: 22rpx 30rpx;">
			<text class="text-line-1 c-33 fs-28 bold flex-1">其他原因（填写）</text>
			<image style="width: 38rpx; height: 38rpx;" v-if="cur!=-1" :src="$path + '/login/ng.png'" mode=""></image>
			<image style="width: 38rpx; height: 38rpx;" v-else :src="$path + '/login/y.png'" mode=""></image>
		</view>
		<view class="w-1 p-r-30" v-if="cur==-1">
			<textarea class="mut w-1 p-30 fs-24" v-model="content" disable-default-padding placeholder="请描述"></textarea>
		</view>
		
		
		<view class="iphonex">
			<view class="w-1 p-30">
				<view class="big-btn" @click="sub">确认取消订单</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const id = ref(0)
	const list = ref([])
	const cur = ref(0)
	const state = ref(0)
	onLoad(o=>{
		id.value = o.id 
		state.value = o.state 
		getlist()
	})
	function getlist(){
		uni.$post({
			url:'/api/Ordersystem/ordercellationreason',
		}).then(res=>{
			list.value = res.data;
		})
	}
	
	const content = ref('')
	
	function sub(){
		if(cur.value==-1 && !content.value.trim().length) return uni.$u.toast('请输入取消原因');
		uni.$post({
			url: '/api/Ordersystem/cancelvorder',
			data: {
				orderid: id.value,
				type: 1,
				restype:cur.value==-1?content.value:list.value[cur.value].title
			}
		}).then(res => {
			uni.$tt(res.msg, 'success')
			uni.$emit('red2')
			uni.$emit('reorder')
			uni.$delayBack()
		})
	}
</script>

<style>
.tbox{
	width: 750rpx;
	height: 80rpx;
	background: #FFEFE5;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
}
.mut{
	height: 192rpx;
	background: #F3F3F3;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
}
</style>
